<template>
    <div class="group">
        <div class="group_top">
            <span>团购详情</span>
            <span class="iconfont order">&#xe63a;</span>
        </div>
        <div class="group_mid">
            <div class="mid_first">
                    <span class="left">名称</span>
                    <span class="right">价值</span>
                    <span class="mid">数量</span>
            </div>
            <div class="mid_second">
                    <span class="left">『私人订制』生日宴求婚告白-工作日14小时</span>
                    <span class="right">3880元</span>
                    <span class="mid">1份</span>
            </div>
            <div class="mid_third">
                <span class="left"></span>
                <span class="right">3788</span>
                <span class="mid">总价</span>
            </div>
            <div class="mid_fourth">
                <span class="left"></span>
                <span class="right">2480</span>
                <span class="mid">团购价</span>
            </div>
            <div class="mid_fifth">
                <h1>【娱乐设施】</h1>
                <p>-KTV、X-Box游戏机、小霸王游戏机、双人街机、桌上足球、四人国粹机、桌游室；</p>
                <h2>【餐饮】</h2>
                <p>-场馆内配有啤酒、饮料、零食等果盘小吃（未包含在费用内）</p>
                <p>-可提供小火锅、自助餐定制餐饮服务，满足多种聚会餐饮需求，详情可联系。</p>
                <h3>【Tips】</h3>
                <p>-场馆内配有啤酒、饮料、零食等果盘小吃（未包含在费用内）</p>
                <p>-可提供小火锅、自助餐定制餐饮服务，满足多种聚会餐饮需求，详情可联系。</p>
                <p>-延时服务，300元/小时；</p>
                <h4>欢迎电话联系咨询，可提前来踩点。</h4>
                <h5>更多图文详情（建议Wi-Fi环境下打开,土豪请随意）</h5>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
.group{
    border: 1px solid rgb(235, 234, 233);
    height: 12.5rem;
    margin-top: 0.3rem;
    width: 100%;
}
.group_top{
    height: 1rem;
    width: 100%;
    font-size: 0.3rem;
    margin-top: 0.3rem;
    margin-left: 0.4rem;
}
.group_top span{
    float: left;
}
.group_top span.order{
    margin-left: 0.2rem;
}
.group_mid{
    width: 100%;
    height: 11rem;
}
.mid_first{
    border: 1px solid rgb(235, 234, 233);
    font-size: 0.3rem;
    
    height: 1rem;
    width: 100%;
}
.mid_first span.left{
    margin-left: 0.4rem;
    float: left;
}
.mid_first span.mid{
    float: right;
    margin-right: 2rem;
}
.mid_first span.right{
    float: right;
    margin-right: 1rem;
}
.mid_second{
    border: 1px solid rgb(235, 234, 233);
    font-size: 0.3rem;
    height: 1.1rem;
    width: 100%;
}
.mid_second span.left{
    margin-left: 0.4rem;
    width: 150px;
    float: left;
}
.mid_second span.mid{
    float: right;
    margin-right: 2rem;
}
.mid_second span.right{
    float: right;
    margin-right: 0.8rem;
}
.mid_third{
    font-size: 0.3rem;
    height: 0.5rem;
    width: 100%;
}
.mid_third span.left{
    margin-left: 0.4rem;
    width: 150px;
    float: left;
}
.mid_third span.mid{
    float: right;
    margin-right: 2rem;
}
.mid_third span.right{
    float: right;
    margin-right: 1rem;
}
.mid_fourth{
    color:  #06c1ae;
    font-size: 0.35rem;
    height: 1rem;
    width: 100%;
}
.mid_fourth span.left{
    margin-left: 0.4rem;
    width: 150px;
    float: left;
}
.mid_fourth span.mid{
    float: right;
    margin-right: 2rem;
}
.mid_fourth span.right{
    float: right;
    margin-right: 0.9rem;
}
.mid_fifth{
    width: 100%;
    height: 8rem;
}
.mid_fifth h1{
    font-size: 0.35rem;
    text-align: left;
}
.mid_fifth p{
    font-size: 0.28rem;
    width: 460px;
    text-align: left
}
.mid_fifth h2{
    margin-top: 0.4rem;
    font-size: 0.35rem;
    text-align: left;
}
.mid_fifth h3{
    margin-top: 0.4rem;
    font-size: 0.35rem;
    text-align: left;
}
.mid_fifth h4{
    margin-top: 0.4rem;
    font-size: 0.3rem;
    text-align: left;
}
.mid_fifth h5{
    border: 1px solid rgb(235, 234, 233);
    margin-top: 0.2rem;
    color:  #06c1ae;
    font-size: 0.34rem;
    text-align: left;
}
</style>
